<!--
 * @Author: Freude Xu
 * @Date: 2021-09-22 09:24:54
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-22 10:13:11
 * @Description: g2-plot
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入g2-plot的资源（在线引入或者本地引入都可以，方法与jquery引入的方法差不多） -->
    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
</head>

<body>
    <!-- 2.创建图表容器 容纳图表的 -->
    <div id="container"></div>
    <!-- 创建一个图表实例 -->
    <!-- 3.1创建一个图标构造函数 -->
    <script>
        // 通过构造函数去创建实例，图标构造函数，折线图为Line 柱状图为column
        // 创建一个折线图构造函数
        // let Line = G2Plot.Line;
        // 创建柱状图构造函数
        let Column = G2Plot.Column;
        // 创建图标实例  参数有两个：第一个：dom容器  第二个：配置对象
        var column = new Column('container', {
            //等价于全局声明data对象，并把它赋值给data 等价于直接写data
            data: [{
                year: '1991',
                value: 3
            }, {
                year: '1992',
                value: 4
            }, {
                year: '1993',
                value: 3.5
            }, {
                year: '1994',
                value: 5
            }, {
                year: '1995',
                value: 4.9
            }],
            //x轴展示的数据
            xField: 'year',
            //y轴的展示数据
            yField: 'value',
            color: 'skyblue',
            columnWidthRatio: .3
        });
        // 4.手动渲染使用render()函数（需要手动渲染）
        column.render()
    </script>

</body>

</html>